<script type="text/ng-template" id="modals/embedExploration">
  <div class="modal-header">
    <h3>Embed this exploration</h3>
  </div>

  <div class="modal-body">
    <p>
      To embed this exploration in another webpage, copy the following HTML into the source code of the webpage:
    </p>

    <accordion close-others="true">
      <accordion-group heading="If your website allows JavaScript" is-open="false">
        <div class="oppia-embed-modal-code" ng-click="selectText($event)">
&lt;oppia oppia-id="<[explorationId]>" src="<[serverName]>"&gt;&lt;/oppia&gt;
&lt;script src="https://cdn.jsdelivr.net/oppia/0.0.1/oppia-player.min.js"&gt;&lt;/script&gt;
        </div>
      </accordion-group>
      <accordion-group heading="If your website does not allow JavaScript" is-open="false" style="margin-top: 3px;">
        <div class="oppia-embed-modal-code" ng-click="selectText($event)">&lt;iframe src="<[serverName]>/explore/<[explorationId]>?iframed=true" width="700" height="1000"&gt;</div>
        <p>
          <em>Note: explorations embedded using iframes will not have automatic scrolling and expanding on your webpage.</em>
        </p>
      </accordion-group>
    </accordion>

    <p>
      For more details, as well as instructions on how to embed a particular version of an exploration, please see the <a href="https://code.google.com/p/oppia/wiki/EmbeddingYourExploration" target="_blank">documentation</a>.
    </p>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" ng-click="close()">Close</button>
  </div>
</script>
